<style lang="less">
  @import './userManager.less';
</style>
<template>
  <div>
    <Row>
      <Col span="24">
      <Card>
        <p slot="title">
          <Icon type="ios-list"></Icon>
          用户列表
        </p>
        <Row>
          <Input v-model="searchModel.userName" placeholder="请输入用户名或登录名..." style="width: 300px"></Input>
          <Button type="primary" shape="circle" @click="searchUser" :loading="searchLoading" icon="ios-search">
            <span>搜索用户</span>
          </Button>
        </Row>
        <Row>
          <Button type="info" icon="person-add" style="margin-top:10px;"
                  v-hasPermissionButton="'/admin/user/addUserButton'" @click="openAddUser">
            <span>添加用户</span>
          </Button>
        </Row>
        <Row type="flex" justify="center" align="middle">
          <Table border :columns="columnHeader" :data="userList"></Table>
        </Row>
        <Row type="flex" justify="center" align="middle">
          <Page :total="total" :current="current" :page-size="pageSize" :show-tota="showTotal" @on-change="onChange"
                show-elevator></Page>
        </Row>
      </Card>
      </Col>

    </Row>


    <Modal v-model="showSaveAndEdit" :title="saveAndEditTitle" :mask-closable="false" @on-ok="saveOrEditUser">
      <Form :model="userInfo" label-position="left" :label-width="100">
        <FormItem label="姓名">
          <Input v-model="userInfo.userName"></Input>
        </FormItem>
        <FormItem label="登录名">
          <Input v-model="userInfo.loginName"></Input>
        </FormItem>
        <FormItem label="密码">
          <Input v-model="userInfo.password"></Input>
        </FormItem>
        <FormItem label="性别">
          <RadioGroup v-model="userInfo.gender">
            <Radio label="0">男</Radio>
            <Radio label="1">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="所属机构">
          <Select v-model="userInfo.organizationId" filterable>
            <Option v-for="organization in organizationList" :value="organization.organizationId"
                    :key="organization.organizationId">{{ organization.showOrganizationName }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="手机">
          <Input v-model="userInfo.phone"></Input>
        </FormItem>
        <FormItem label="邮箱">
          <Input v-model="userInfo.email"></Input>
        </FormItem>
        <FormItem label="地址">
          <Input v-model="userInfo.address"></Input>
        </FormItem>
        <FormItem label="备注">
          <Input v-model="userInfo.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                 placeholder=""></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="showConfigUserRole" title="授权用户" :mask-closable="false" @on-ok="saveUserRole">
      <Form>
        <FormItem label="姓名">
          <Input v-model="userInfo.userName" disabled></Input>
        </FormItem>
        <FormItem label="登录名">
          <Input v-model="userInfo.loginName" disabled></Input>
        </FormItem>
        <FormItem label="授权角色">
          <Select v-model="userRole" filterable multiple>
            <Option v-for="item in roleList" :value="item.roleId" :key="item.roleId">{{ item.roleName }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>


  </div>

</template>
<script>
  import util from '@/lib/util.js';

  export default {
    data() {
      return {
        showSaveAndEdit: false,
        saveAndEditTitle: '',
        searchLoading: false,
        searchModel: {
          pageSize: 10,
          pageNum: 1,
          userName: null
        },
        showConfigUserRole: false,
        roleList: [],
        userRole: [],
        userInfo: {
          userId: null,
          userName: '',
          loginName: '',
          password: '',
          organizationId: null,
          gender: null,
          phone: '',
          email: '',
          address: '',
          remark: ''

        },
        total: null,
        current: null,
        pageSize: null,
        showTotal: true,
        organizationList: [],

        //表头
        columnHeader: [
          {
            title: '姓名',
            key: 'userName',
            width: 100,
            fixed: 'left'
          },
          {
            title: '登录名',
            key: 'loginName',
            width: 150,
            fixed: 'left'
          },
          {
            title: '角色',
            key: 'roleName',
            width: 150,
            fixed: 'left'
          },
          {
            title: '机构',
            key: 'organizationName',
            width: 100,
            fixed: 'left'
          },
          {
            title: '性别',
            key: 'genderName',
            width: 100,
            fixed: 'left'
          },
          {
            title: '电话',
            key: 'phone',
            width: 200,
            fixed: 'left'
          }, {
            title: '用户状态',
            key: 'state',
            width: 100,
            fixed: 'left',
            render: (h, params) => {
              return h('div', [
                h('i-switch', {
                  props: {
                    value: params.row.state == 1,
                    size: 'large'
                  },
                  on: {
                    'on-change': (value) => {
                      this.changeState(value, params.row)
                    }
                  }
                }, [
                  h('span', {
                    slot: 'open'
                  }, '正常'),
                  h('span', {
                    slot: 'close',
                  }, '冻结')
                ])
              ]);
            }
          },
          {
            title: '地址',
            key: 'address',
            width: 200,
            fixed: 'left'
          },
          {
            title: '邮箱',
            key: 'email',
            width: 200,
            fixed: 'left'
          },
          {
            title: '备注',
            key: 'remark',
            width: 200,
            fixed: 'left'
          },
          {
            title: '操作',
            key: 'action',
            width: 250,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editUser(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/user/editUserButton'
                    }
                  ]
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.removeUser(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/user/deleteUserButton'
                    }
                  ]
                }, '删除'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.userRoleConfig(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/user/userRoleConfigButton'
                    }
                  ]
                }, '授权角色')
              ]);
            }
          }
        ],

        userList: []
      }
    },
    mounted() {

      this.getUserList();
      this.initOrgList();
      this.initRoleList();
    },
    created() {

    },
    methods: {

      getUserList() {
        this.userList = [];
        let that = this;

        util.post('/admin/user/getUserPage', this.searchModel, function (res) {
          let userList = res.list;
          userList.forEach(item => {
            that.userList.push(item);
          });
          that.total = res.total;
          that.current = res.pageNum;
          that.pageSize = res.pageSize;
        });


      },
      changeState(state, user) {
        let url = '/admin/user/update';
        util.post(url, {
          userId: user.userId,
          state: state ? 1 : 0
        }, function (data) {

        }, true)
      },
      editUser(row) {
        this.saveAndEditTitle = '编辑用户信息';
        this.showSaveAndEdit = true;
        this.userInfo = {
          userId: row.userId,
          userName: row.userName,
          loginName: row.loginName,
          organizationId: row.organizationId,
          gender: row.gender+"",
          phone: row.phone,
          email: row.email,
          address: row.address,
          remark: row.remark
        };
      },
      saveUserRole() {
        let that = this;
        let roleIds = '';
        this.userRole.forEach(item => {
          roleIds += item + ',';
        });
        util.post('/admin/role/configUserRole', {
          userId: that.userInfo.userId,
          roleIds: roleIds
        }, function (data) {

        }, true)
      },
      removeUser(row) {

        this.$Modal.confirm({
          title: '提示',
          content: '确定要删除用户吗?',
          onOk: () => {
            let that = this;
            that.userList = [];
            this.$http.post('/api/admin/user/remove', null, {
              params: {
                id: row.userId
              }
            }).then(res => {
              that.getUserList();


            }).catch(err => {

            });
          }
        });


      },
      onChange(pageNum) {
        this.searchModel.pageNum = pageNum;
        this.getUserList();
      },
      searchUser() {
        this.getUserList();
      },
      openAddUser() {
        this.saveAndEditTitle = '添加用户信息';
        this.showSaveAndEdit = true;
        this.userInfo = {};
      },
      saveOrEditUser() {
        let url = '';
        if (this.userInfo.userId) {
          url = '/admin/user/update';
        } else {
          url = '/admin/user/add';
        }
        util.post(url, this.userInfo,function (data) {

        },true);
      },


      userRoleConfig(row) {
        let that = this;
        this.userInfo = row;
        this.showConfigUserRole = true;
        this.userRole = [];
        //查询已经配置好的角色
        util.post('/admin/role/getUserRoleList', {
          userId: row.userId
        }, function (data) {
          data.forEach(item => {
            that.userRole.push(item.roleId);
          });
        })

      },
      initOrgList() {
        let that = this;
        that.organizationList = [];
        this.$http.post('/api/admin/organization/all', {}).then(res => {
          let initOrgList = res.data;
          initOrgList.forEach(item => {
            that.organizationList.push(item);
          });

        }).catch(err => {

        });
      },
      initRoleList() {
        let that = this;
        that.organizationList = [];
        util.post('/admin/role/all', {}, function (data) {
          data.forEach(item => {
            that.roleList.push(item);
          });
        });

      }
    }
  }
</script>
